<script setup lang="ts">
import { useGuessList } from '@/composables'
import { useMemberStore } from '@/stores'

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
// SAIL-0007 获取
// 获取会员信息
const memberStore = useMemberStore()

const { guessRef, onScrolltolower } = useGuessList()

</script>

<template>
  <!-- 页面全局配置 -->
  <view class="pageconfig">
          <!-- 自定义导航栏 -->
          <CustomNavbar />
  	<!--vuetop-->
  	<view class="cu-list card-menu myself">
  		<view class="avatar">
  			<image class="avatar-img tn-gradient-bg__cool-5
" src="\src\static\images\avatar.png" mode="aspectFit"></image>
  			<view class="avatar-massage">
  				<view class="avatar-massage1">白荟瑗</view>
  				<!-- <view class="avatar-massage2">*******支队</view> -->
  				<view class="avatar-massage3">202213501113</view>
  			</view>
  		</view>
  		<view class="my-content">
  			<view class="thin-divider"></view>
  			<view class="my-content1">
  				<image class="my-content-pic" src="\src\static\tabs\050_档案-13.png" ></image>
  				<text>清除缓存</text>
  			</view>
  			<view class="thin-divider"></view>
  			<view class="my-content1">
  				<image class="my-content-pic" src="\src\static\tabs\050_网络.png"></image>
  				<text>检查更新</text>
  			</view>
  			<view class="thin-divider"></view>
  			<view class="my-content1">
  				<image class="my-content-pic" src="\src\static\tabs\050_账单.png" ></image>
  				<text>设置</text>
  			</view>
  		</view>
  	</view>
  	<!-- <view class="button-container">
  		<view class="my-button">
  			退出登录
  		</view>
  	</view> -->

  </view>
</template>

<style lang="scss" scoped>
page {
  height: 100%;
  overflow: hidden;
  background-color: #f0f3f8;
}
.radius {
	border-radius: 6upx;
}
.viewport {
  height: 100%;
  background-repeat: no-repeat;
  background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/center_bg.png);
  background-size: 100% auto;
}

.pageconfig {
		width: 100%;
		overflow: hidden;
		overflow-y: scroll;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	/**pagedomcss**/


	.picture2 {
		width: 100%;
    height: 400rpx;
		overflow: hidden;
		position: relative;
		z-index: 1;
	}


	.myself {
		background-color: #fff;
		// margin-top: -180rpx;
		z-index: 2;
		color: #000;
    margin-top: 10rpx;
	}

	.avatar {
		display: flex;
		justify-content: start;
		align-items: center;
	}

	.avatar-img {
		height: 130rpx;
		width: 130rpx;
		border-radius: 50%;
		margin: 20rpx 40rpx;
		border: 1px solid #999;
	}

	.avatar-massage {
		margin-left: 20rpx;
		color: #333;
	}

	.avatar-massage1 {
		font-size: 30rpx;
		font-weight: 600rpx;
		margin: 15rpx 0;
	}

	.avatar-massage2 {
		margin-bottom: 10rpx;
	}

	.avatar-massage3 {
		color: #666;
	}

	.thin-divider {
		height: 0.5px;
		/* 分界线的高度 */
		background-color: #eee;
		/* 分界线的颜色，这里使用灰色 */
		margin: 10px 25rpx;
	}

	.my-content1 {
		display: flex;
		justify-content: start;
		align-items: center;
		margin: 50rpx 50rpx;
		color: #333;
		font-size: 30rpx;
	}

	.my-button {
		margin-top: 200rpx;
		width: 50%;
		border-radius: 30rpx;
		height: 70rpx;
		background-color: #0038b1;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
    box-shadow: 3px 3px 5px rgba(164, 161, 161, 0.5);
	}

	.button-container {
		display: flex;
		justify-content: center;
	}
	.my-content-pic{
		width: 60rpx;
		height: 60rpx;
		margin-right: 10rpx;
	}
  .cu-list{
    width:92%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 3%;
  }

</style>
